Spread.Viewsでは、actionプロパティを文字列または配列として列内で使用できます。編集、取り消しといった組み込みアクションを使用することも、カスタムアクションを指定することもできます。個々のアクションは、名前、プレゼンター、およびハンドラをパラメータとして持つオブジェクトです。デフォルトでは、アクションはボタンとして設定されます。

ハンドラ関数には、以下の引数を指定できます。

• hitInfo
• dataItem
• gridModel

列にアクションを実装するには、次の手順を実行します。

サンプルコード

1. グリッドの列を定義します。デフォルトでは、アクションはボタンとして設定されます。したがって、列定義に指定する必要があるのはボタン名だけです。
   

    var columns = [
           { id: 'firstName', caption: 'First Name', dataField: 'firstName', width: '80' },
              { id: 'lastName', caption: 'Last Name', dataField: 'lastName', width: '80' },
              { id: 'score', caption: 'Score', dataField: 'score', width: '80', dataType: 'number' },
              { id: 'position', caption: 'Position', dataField: 'position', width: '*' },
              {
                  id: 'controlPanel',
                  action: [{
                      name: 'edit'
                  }, {
                      name: 'details',
                      handler: showDetails
                  }],
                  width: 270
              }
      ];

2. 各アクションボタンの関数を定義します。

    function showDetails(args) {
      var hitInfo = args.hitInfo;
      var dataItem = args.dataItem;
      initDialog(dataItem);
    }
   
    function initDialog(dataItem) {
      var overlay = $(<div class="dialog-overlay"></div>');
      var dialogContainer = $('<div class="dialog-container"></div>');
      var dialog = $('<div class="dialog-header"><span style="font-weight:bold">Applicant Details</span><div class="dialog-close-button"><span>✕</span></div></div>' +
          '<div class="dialog-body">' +
          '<div style="font-size:20px;font-weight:bold;">' + dataItem.firstName + ' ' + dataItem.lastName + '</div>' +
          '<div style="font-style:italic">' + dataItem.position + '</div>' +
          '<div style="margin-top:15px;">' + dataItem.advantage + '</div></div>');
      dialogContainer.append(dialog);
      $(document.body).append(overlay).append(dialogContainer);
      overlay.on('mousewheel', function () {
          return false;
      });
      $('.dialog-close-button').on('click', function () {
          overlay.remove();
          dialogContainer.remove();
      });
   
      var screenWindow = $(window);
      var left = parseInt((screenWindow.width() - dialogContainer.width()) / 2 + window.pageXOffset);
      var top = parseInt((screenWindow.height() - dialogContainer.height()) / 2 + window.pageYOffset);
      dialogContainer.css({
          left: left,
          top: top
      });
    }

参照

rowHeight

colMinWidth

allowEditing